<template>
  <div class="container auth-page">
    <div v-if="infoDetail.yeepayAuthStatus !== 0" :class="infoDetail.yeepayAuthStatus ? 'status-' + infoDetail.yeepayAuthStatus : ''"
      class="status-bar">
      <h2>{{ statusTitle }}</h2>
      <p>{{ statusDesc }}</p>
    </div>
    <div v-if="infoDetail.yeepayAuthStatus !== 0" class="height-45"></div>
    <div class="tips-t pad-t-10 pad-b-10 pad-l-12 pad-r-12">温馨提示：根据国家法律规定和为了保障您个人的财产资金安全，完善以下信息后才可获取卖家操作权限。</div>
    <div class="panel panel-box pad-t-5 pad-b-5">
      <div class="flex v-align-c div-input">
        <div class="form-l">真实姓名</div>
        <div class="flex-item"><input v-model="member.legalName" :disabled="disabledRead" maxlength="6" placeholder="请输入真实姓名"/></div>
      </div>
      <div class="flex v-align-c div-input" @click="showBankPicker">
        <div class="form-l">开户行</div>
        <div class="flex-item select-bar">
          <div class="flex v-align-c">
            <label class="flex-item">{{pickBankText}}</label>
            <icon class="iconfont icon-arrow-right"></icon>
          </div>
        </div>        
      </div>      
      <div class="flex v-align-c div-input">
        <div class="form-l">银行卡号</div>
        <div class="flex-item"><input type="number" maxlength="19" v-model="member.cardNo" placeholder="请输入银行卡号"/></div>
      </div>
      <div v-if="getShowBuyCard" class="flex v-align-t div-input">
        <div class="form-l">结算银行卡</div>
        <div class="flex-item"
          @click="idCard('cardPic')">
          <div v-if="!settleBankcardPic" class="upload-bar pad-t-8 pad-b-8">
            <img v-if="fileSpace"
              :src="fileSpace + '/images/icon-pic-3.png'" alt="" class="width-45 height-45">
            <label>点击上传</label>
          </div>
          <img v-if="fileSpace && settleBankcardPic" class="width-140 height-80" :src="settleBankcardPic"/>
        </div>
      </div>
    </div>
    <div v-if="getShowBuyCard" class="panel panel-box pad-t-5 pad-b-5">
      <div class="flex v-align-c div-input">
        <div class="form-l">身份证号</div>
        <div class="flex-item"><input v-model="member.legalIdCard" :disabled="disabledRead" maxlength="18" placeholder="请输入身份证号码"/></div>
      </div>      
      <div class="flex v-align-t div-input">
        <div class="form-l">身份证正面</div>
        <div class="flex-item" :class="disabledRead ? 'disabledRead' : ''"
          @click="idCard('positive')">
          <div v-if="!idCardFrontPic" class="upload-bar pad-t-8 pad-b-8">
            <img v-if="fileSpace"
              :src="fileSpace + '/images/icon-pic-3.png'" alt="" class="width-45 height-45">
            <label>点击上传</label>
          </div>
          <img v-if="fileSpace && idCardFrontPic" class="width-140 height-80" :src="idCardFrontPic"/>
        </div>
      </div>
      <div class="flex v-align-t div-input">
        <div class="form-l">身份证反面</div>
        <div class="flex-item" :class="disabledRead ? 'disabledRead' : ''"
          @click="idCard('reverse')">
          <div v-if="!idCardBackPic" class="upload-bar pad-t-8 pad-b-8">
            <img v-if="fileSpace"
              :src="fileSpace + '/images/icon-pic-3.png'" alt="" class="width-45 height-45">
            <label>点击上传</label>
          </div>
          <img v-if="fileSpace && idCardBackPic" class="width-140 height-80" :src="idCardBackPic"/>
        </div>
      </div>
      <div class="flex v-align-t div-input">
        <div class="form-l">手持身份证</div>
        <div class="flex-item" :class="disabledRead ? 'disabledRead' : ''"
          @click="idCard('idPic')">
          <div v-if="!handIdCardPic" class="upload-bar pad-t-8 pad-b-8">
            <img v-if="fileSpace"
              :src="fileSpace + '/images/icon-pic-3.png'" alt="" class="width-45 height-45">
            <label>点击上传</label>
          </div>
          <img v-if="fileSpace && handIdCardPic" class="width-140 height-80" :src="handIdCardPic"/>
        </div>
      </div>
    </div>
    <div class="panel panel-box pad-t-5 pad-b-5">
      <div class="flex v-align-c div-input" @click="showProvincePicker">
        <div class="form-l">所在省</div>
        <div class="flex-item select-bar" :class="disabledRead ? 'disabledRead' : ''">
          <div class="flex v-align-c">
            <label class="flex-item">{{pickProvinceText}}</label>
            <icon class="iconfont icon-arrow-right"></icon>
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input" @click="showCityPicker">
        <div class="form-l">所在市</div>
        <div class="flex-item select-bar" :class="disabledRead ? 'disabledRead' : ''">
          <div class="flex v-align-c">
            <label class="flex-item">{{pickCityText}}</label>
            <icon class="iconfont icon-arrow-right"></icon>
          </div>
        </div>
      </div>      
      <div class="flex v-align-c div-input" @click="showDistrictPicker">
        <div class="form-l">所在区</div>
        <div class="flex-item select-bar" :class="disabledRead ? 'disabledRead' : ''">
          <div class="flex v-align-c">
            <label class="flex-item">{{pickDistrictText}}</label>
            <icon class="iconfont icon-arrow-right"></icon>
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input mar-t--10 mar-b--10">
        <div class="form-l">详情地址</div>
        <div class="flex-item">
          <div class="flex v-align-c">            
            <div class="address-textarea font-14 mar-t-10 mar-r-10">
              <input v-model="selAddress" :disabled="disabledRead" placeholder="请输入详情地址"/>
            </div>
            <div class="select-local flex v-align-c"
              :class="disabledRead ? 'disabledRead' : ''" @click="chooseLocation">
              <img v-if="fileSpace" mode="widthFix" class="width-15 height-17"
                :src="fileSpace + '/images/local-seticon-2.png'"/>
              <label class="flex-item">选择地址</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="height-66"></div>
    <div class="pad-10 submit-btn">
      <button @click="save" class="p-button">提交</button>
    </div>
    <div class="pad-t-10"></div>
    <!-- 选择银行列表 -->
    <van-popup
      :show="isShowBankPicker"
      position="bottom"
      @close="onBankClose">
      <van-picker
        show-toolbar
        :columns="pickerBankArray"
        @cancel="onBankClose"
        @confirm="onBankConfirm"/>
    </van-popup>
    <!-- 选择省列表 -->
    <van-popup
      :show="isShowProvincePicker"
      position="bottom"
      @close="onProvinceClose">
      <van-picker
        show-toolbar
        :columns="pickerProvinceArray"
        @cancel="onProvinceClose"
        @confirm="onProvinceConfirm"/>
    </van-popup>
    <!-- 选择市列表 -->
    <van-popup
      :show="isShowCityPicker"
      position="bottom"
      @close="onCityClose">
      <van-picker
        show-toolbar
        :columns="pickerCityArray"
        @cancel="onCityClose"
        @confirm="onCityConfirm"/>
    </van-popup>
    <!-- 选择区列表 -->
    <van-popup
      :show="isShowDistrictPicker"
      position="bottom"
      @close="onDistrictClose">
      <van-picker
        show-toolbar
        :columns="pickerDistrictArray"
        @cancel="onDistrictClose"
        @confirm="onDistrictConfirm"/>
    </van-popup>
  </div>
</template>

<script>
  import { getMerchant, saveYeepayAutoStatus, listProvince, listCity, listDistrict } from '@/api/personal'
  import { getMemberInfo } from '@/api/home'
  import { listBank } from '@/api/common'
  import GetFormId from '@/components/GetFormId'

  export default {
    components: { GetFormId },
    data() {
      return {
        // 银行初始数据
        isShowBankPicker: false,
        pickerBankArray: [],
        pickBankId: '',
        pickBankText: '请选择开户行',
        // 省初始数据
        isShowProvincePicker: false,
        pickerProvinceArray: [],
        pickProvinceCode: '',
        pickProvinceText: '选择您所在的省',
        provinceParentId: '',
        // 市初始数据
        isShowCityPicker: false,
        pickerCityArray: [],
        pickCityCode: '',
        pickCityText: '选择您所在的市',
        cityParentId: '',
        // 区初始数据
        isShowDistrictPicker: false,
        pickerDistrictArray: [],
        pickDistrictCode: '',
        pickDistrictText: '选择您所在的区',
        bankMap: {},
        member: {},
        selAddress: '',
        disabledRead: false,
        info: {},
        queryData: {},
        files: [],
        settleBankcardPic: '',
        idCardFrontPic: '',
        idCardBackPic: '',
        handIdCardPic: '',
        statusTitle: '',
        statusDesc: '',
        infoDetail: {}
      }
    },
    mounted() {
      this.urlFrom = this.getCurrentPage().query.urlFrom
      this.queryData.nature = this.getCurrentPage().query.nature
      this.queryData.recruiterId = this.getCurrentPage().query.recruiterId
      this.queryData.enterpriseId = this.getCurrentPage().query.enterpriseId
      const pageFrom = this.getCurrentPage().query.pageFrom
      if (pageFrom) this.getMemberInfo()
    },
    methods: {
      idCard(type) {
        if (this.disabledRead && type !== 'cardPic') return
        let that = this
        that.$pt.chooseImage({
          count: 1, // 默认9
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  original原图  compressed压缩图
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            that.$utils.showToast({
              title: '图片上传中',
              icon: 'loading',
              duration: 150000,
              mask: true
            })
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            // console.log(res)
            that.files = res.tempFilePaths
            that.doUpload(type)
          },
          fail: function(res) {
            this.$utils.showToast({ title: '图片选择失败，请重新选择！' })
          },
          complete: function(res) {
            console.log('complete')
          }
        })
      },
      doUpload(type) {
        const that = this
        this.files.forEach(file => {
          // 使用微信上传（只能单张上传）
          const uploadTask = that.$pt.uploadFile({
            url: process.env.BASE_API + '/common/uploadFiles',
            filePath: file,
            name: 'files',
            success(res) {
              const result = JSON.parse(res.data)
              if (result.statusCode >= 400) {
                that.$pt.hideToast()
                that.files = []
                return
              }
              if (result.code === 101) {
                that.$pt.hideToast()
                if (type === 'cardPic') {
                  that.settleBankcardPic = result.data[0]
                  that.member.settleBankcardPic = that.settleBankcardPic
                } else if (type === 'positive') {
                  that.idCardFrontPic = result.data[0]
                  that.member.idCardFrontPic = that.idCardFrontPic
                } else if (type === 'reverse') {
                  that.idCardBackPic = result.data[0]
                  that.member.idCardBackPic = that.idCardBackPic
                } else if (type === 'idPic') {
                  that.handIdCardPic = result.data[0]
                  that.member.handIdCardPic = that.handIdCardPic
                }
              } else {
                that.files = []
                that.$utils.showToast({ title: '图片上传发生错误:' + result.msg })
              }
            },
            complete(res) {
              if (res.statusCode >= 400 && res.statusCode !== 504) {
                that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.files = []
                  that.$pt.hideToast()
                }, 800)
              }
              if (res.statusCode === 504) {
                that.$utils.showToast({ title: '网络异常，请稍后再试（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.files = []
                  that.$pt.hideToast()
                }, 800)
              }
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度', res.progress)
          })
        })
      },
      // 选择省下拉
      showProvincePicker() {
        if (this.disabledRead) return
        if (this.pickerProvinceArray.length === 0) {
          this.$utils.showToast({
            title: '数据加载中',
            icon: 'loading'
          })
          setTimeout(() => {
            this.$pt.hideToast()
          }, 1000)
        }
        this.isShowProvincePicker = true
      },
      onProvinceClose() {
        this.isShowProvincePicker = false
        this.$pt.hideToast()
      },
      onProvinceConfirm(e) {
        this.isShowProvincePicker = false
        this.$pt.hideToast()
        if (e.mp.detail.value.text !== this.pickProvinceText) {
          this.pickerCityArray = []
          this.pickCityCode = ''
          this.cityParentId = ''
          this.pickCityText = '选择您所在的市'
          this.pickerDistrictArray = []
          this.pickDistrictCode = ''
          this.pickDistrictText = '选择您所在的区'
        }
        this.pickProvinceCode = e.mp.detail.value.value
        this.pickProvinceText = e.mp.detail.value.text
        this.provinceParentId = e.mp.detail.value.areaId
        this.listCity()
      },
      // 选择市下拉
      showCityPicker() {
        if (this.disabledRead) return
        if (!this.pickProvinceCode) return this.$utils.showToast({ title: '请先选择您所在的省' })
        this.isShowCityPicker = true
      },
      onCityClose() {
        this.isShowCityPicker = false
        this.$pt.hideToast()
      },
      onCityConfirm(e) {
        this.isShowCityPicker = false
        this.$pt.hideToast()
        if (e.mp.detail.value.text !== this.pickCityText) {
          this.pickerDistrictArray = []
          this.pickDistrictCode = ''
          this.pickDistrictText = '选择您所在的区'
        }
        this.pickCityCode = e.mp.detail.value.value
        this.pickCityText = e.mp.detail.value.text
        this.cityParentId = e.mp.detail.value.areaId
        this.listDistrict()
      },
      // 选择区下拉
      showDistrictPicker() {
        if (this.disabledRead) return
        if (!this.pickProvinceCode) return this.$utils.showToast({ title: '请先选择您所在的省' })
        if (!this.pickCityCode) return this.$utils.showToast({ title: '请先选择您所在的市' })
        this.isShowDistrictPicker = true
      },
      onDistrictClose() {
        this.isShowDistrictPicker = false
        this.$pt.hideToast()
      },
      onDistrictConfirm(e) {
        this.isShowDistrictPicker = false
        this.$pt.hideToast()
        this.pickDistrictCode = e.mp.detail.value.value
        this.pickDistrictText = e.mp.detail.value.text
      },
      // 选择银行下拉
      showBankPicker() {
        this.isShowBankPicker = true
      },
      onBankClose() {
        this.isShowBankPicker = false
      },
      onBankConfirm(e) {
        this.isShowBankPicker = false
        this.pickBankId = e.mp.detail.value.value
        this.pickBankText = e.mp.detail.value.text
        this.member.bankId = this.pickBankId
      },
      getMerchant() {
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading',
          duration: 150000,
          mask: true
        })
        getMerchant(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          this.member = response.data
          if (this.member.settleBankcardPic) {
            this.settleBankcardPic = this.member.settleBankcardPic
          }
          if (this.member.idCardFrontPic) {
            this.idCardFrontPic = this.member.idCardFrontPic
          }
          if (this.member.idCardBackPic) {
            this.idCardBackPic = this.member.idCardBackPic
          }
          if (this.member.handIdCardPic) {
            this.handIdCardPic = this.member.handIdCardPic
          }
          if (this.member.headBankCode) {
            this.pickBankId = this.member.headBankCode
            this.pickBankText = this.bankMap[this.pickBankId]
          } else {
            this.pickBankId = ''
            this.pickBankText = '请选择开户行'
          }
          if (this.member.merAddress) {
            this.selAddress = this.member.merAddress
          }
          if (this.member.merProvinceCode && this.member.merCityCode && this.member.merDistrictCode) {
            this.pickProvinceText = this.member.provinceName.replace('省', '')
            this.pickCityText = this.member.cityName
            this.pickDistrictText = this.member.districtName
            this.pickProvinceCode = this.member.merProvinceCode
            this.pickCityCode = this.member.merCityCode
            this.pickDistrictCode = this.member.merDistrictCode
          }
          this.listProvince()
        }).catch(() => {
        })
      },
      save() {
        this.$utils.showToast({
          title: '提交认证中',
          icon: 'loading',
          duration: 150000,
          mask: true
        })
        this.info = {
          memberId: this.getCustomerId,
          legalName: this.member.legalName,
          headBankCode: this.pickBankId,
          cardNo: this.member.cardNo,
          settleBankcardPic: this.member.settleBankcardPic,
          // 个人真实信息
          merContactPhone: this.getPhone,
          legalIdCard: this.member.legalIdCard,
          idCardFrontPic: this.member.idCardFrontPic,
          idCardBackPic: this.member.idCardBackPic,
          handIdCardPic: this.member.handIdCardPic,
          // 省市区详情地址
          merProvinceCode: this.pickProvinceCode,
          merCityCode: this.pickCityCode,
          merDistrictCode: this.pickDistrictCode,
          merAddress: this.selAddress
        }
        if (this.member.merchantId) {
          this.info.merchantId = this.member.merchantId
        }
        if (this.member.requestNo) {
          this.info.requestNo = this.member.requestNo
        }
        if (this.queryData.nature) {
          this.info.nature = this.queryData.nature
          this.info.recruiterId = this.queryData.recruiterId
          this.info.enterpriseId = this.queryData.enterpriseId
        }
        if (!this.member.legalName) return this.$utils.showToast({ title: '请输入真实姓名' })
        if (!this.pickBankId) return this.$utils.showToast({ title: '请选择开户行' })
        if (!this.member.cardNo) return this.$utils.showToast({ title: '请输入银行卡号' })
        if (this.getShowBuyCard) {
          if (!this.member.settleBankcardPic) return this.$utils.showToast({ title: '请上传结算银行卡' })
          if (!this.member.legalIdCard) return this.$utils.showToast({ title: '请输入身份证号码' })
          if (/.*[\u4e00-\u9fa5]+.*$/.test(this.member.legalIdCard)) return this.$utils.showToast({ title: '请输入正确的身份证号码' })
          if (!this.member.idCardFrontPic) return this.$utils.showToast({ title: '请上传身份证正面' })
          if (!this.member.idCardBackPic) return this.$utils.showToast({ title: '请上传身份证反面' })
          if (!this.member.handIdCardPic) return this.$utils.showToast({ title: '请上传手持身份证' })
        }
        if (!this.pickProvinceCode) return this.$utils.showToast({ title: '请选择所在省' })
        if (!this.pickCityCode) return this.$utils.showToast({ title: '请选择所在市' })
        if (!this.pickDistrictCode) return this.$utils.showToast({ title: '请选择所在区' })
        if (!this.selAddress) return this.$utils.showToast({ title: '请输入详情地址' })
        saveYeepayAutoStatus(this.info).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          setTimeout(() => {
            this.$pt.reLaunch({ url: '/pages/personal/main' })
          }, 800)
        }).catch(() => {
        })
      },
      listProvince() {
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading',
          duration: 150000,
          mask: true
        })
        listProvince().then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          // 省数据
          const provinceOptions = []
          response.data.forEach(item => {
            const obj = {
              text: item.areaName,
              value: item.areaCode,
              areaId: item.areaId,
              areaLevel: item.areaLevel
            }
            provinceOptions.push(obj)
          })
          this.pickerProvinceArray = provinceOptions
          // 初始市数据展示
          this.pickerProvinceArray.forEach(item => {
            if (item.value === this.pickProvinceCode) {
              this.provinceParentId = item.areaId
            }
          })
          this.listCity()
        }).catch(() => {
        })
      },
      listCity() {
        if (!this.pickProvinceCode) return
        listCity({
          provinceCode: this.pickProvinceCode
        }).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          // 市数据
          const cityOptions = []
          response.data.forEach(item => {
            const obj = {
              text: item.areaName,
              value: item.areaCode,
              areaId: item.areaId,
              areaLevel: item.areaLevel,
              parentId: item.parentId
            }
            cityOptions.push(obj)
          })
          this.pickerCityAllArray = cityOptions
          let useCityList = []
          useCityList = this.pickerCityAllArray.filter(e => e.parentId === this.provinceParentId)
          this.pickerCityArray = useCityList
          // 初始区数据展示
          this.pickerCityArray.forEach(item => {
            if (item.value === this.pickCityCode) {
              this.cityParentId = item.areaId
            }
          })
          this.listDistrict()
        }).catch(() => {
        })
      },
      listDistrict() {
        if (!this.pickCityCode) return
        listDistrict({
          cityCode: this.pickCityCode
        }).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          // 区数据
          const districtOptions = []
          response.data.forEach(item => {
            const obj = {
              text: item.areaName,
              value: item.areaCode,
              areaId: item.areaId,
              areaLevel: item.areaLevel,
              parentId: item.parentId
            }
            districtOptions.push(obj)
          })
          this.pickerDistrictAllArray = districtOptions
          let useDistrictList = []
          useDistrictList = this.pickerDistrictAllArray.filter(e => e.parentId === this.cityParentId)
          this.pickerDistrictArray = useDistrictList
        }).catch(() => {
        })
      },
      chooseLocation() {
        if (this.disabledRead) return
        const that = this
        that.$pt.chooseLocation({
          success: (res) => {
            this.selAddress = res.address
            this.member.latitude = res.latitude
            this.member.longitude = res.longitude
          },
          fail: function(err) {
            if (err.errMsg.indexOf('cancel') !== -1) return
            that.$pt.showModal({
              content: '需要访问你的位置',
              success(res) {
                if (res.confirm) {
                  that.$pt.openSetting()
                } else if (res.cancel) {
                  console.log(err)
                }
              }
            })
          }
        })
      },
      getMemberInfo() {
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading',
          duration: 150000,
          mask: true
        })
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.infoDetail = response.data
          if (this.infoDetail.yeepayAuthStatus === 2) {
            this.disabledRead = true
            this.statusTitle = '已通过'
            this.statusDesc = '若重新提交资料将重新审核'
          } else if (this.infoDetail.yeepayAuthStatus === 1) {
            this.disabledRead = false
            this.statusTitle = '审核中'
            this.statusDesc = '（24小时内出结果，通常1~2小时）'
          } else if (this.infoDetail.yeepayAuthStatus === 3) {
            this.disabledRead = false
            this.statusTitle = '未通过'
            this.statusDesc = '请检查信息后重新提交审核'
          }
          listBank().then((response) => {
            if (response.isError) return
            const banks = response.data
            this.pickerBankArray = []
            banks.forEach(bank => {
              this.pickerBankArray.push({
                text: bank.bankName,
                value: bank.bankId
              })
              this.bankMap[bank.bankId] = bank.bankName
            })
            this.pickBankId = this.infoDetail.bankId
            this.pickBankText = this.bankMap[this.infoDetail.bankId]
            // yeepayAuthStatus为1 审核中
            // yeepayAuthStatus为2 已通过
            // yeepayAuthStatus为3 未通过
            // if (this.infoDetail.yeepayAuthStatus !== 2) {
            //   this.listProvince()
            // } else {
            //   this.getMerchant()
            // }
            this.getMerchant()
          }).catch(() => {
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container{
    background: #f4f4f4;
    min-height: calc(100vh);
  }
  .status-bar{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 30;
    text-align: center;
    padding: 1px 0 3px 0;
    h2{
      font-size: 15px;
      font-weight: normal;
      margin: 0;
      padding: 0;
    }
    p{
      font-size: 12px;
      margin-top: -3px;
    }
    &.status-1{
      background: #818181;
      color: #fff;
    }
    &.status-2{
      background: #04c160;
      color: #fff;
    }
    &.status-3{
      background: #ff4a4a;
      color: #fff;
    }
  }
  .disabledRead{
    opacity: 0.5;
  }
  .select-bar{
    border: #9e9e9e 1px solid;
    padding: 4px 8px;
    color: #818181;
    .icon-arrow-right{
      color: #9e9e9e;
      transform:rotate(90deg);
    }
  }
  .select-local{
    border: #9e9e9e 1px solid;
    border-radius: 100px;
    padding: 5px 6px;
    label{
      font-size: 10px;
      color: #9e9e9e;
      display: block;
      width: 45px;
      margin-left: 5px;
    }
  }
  .submit-btn{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    z-index: 20;
  }
  .address-textarea {
    width: 100%;
    line-height: 1.2;
    height: 40px;
  }
  .form-l{
    text-align: right;
    width: 85px;
    font-weight: bold;
    font-size: 15px;
    padding-left: 15px;
    margin-right: 25px;
    color: #292929;
  }
  .upload-bar{
    text-align: center;
    width: 140px;
    height: 80px;
    border-radius: 5px;
    box-sizing: border-box;
    border: #aeaeae 1px dashed;
    img{
      display: inline-block;
    }
    label{
      display: block;
      font-size: 12px;
      color: #595959;
      margin-top: -4px;
    }
  }
  .border-b{
    border-bottom: #f1f1f1 1px solid;
  }
  .panel-box{
    border-radius: 0px;
    box-shadow: none;
    border-top: none;
    border-bottom: none;
    margin-left: 0;
    margin-right: 0;
  }
  .p-button{
    display: block;
    border-radius: 100px;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    text-align: center;
    border: none;
    background: linear-gradient(to right, #fed801, #fcc508);
    &[disabled]{
      color: #595959;
      background: linear-gradient(to right, #dadada, #dadada);
    }
    &:after{
      content: '';
      display: none;
    }
  }
  .tips-t{
    color: #818181;
    font-size: 12px;
    // font-weight: bold;
  }
  .s-input-bar{
    // border: #c5c5c5 1px solid;
    // border-radius: 8px;
    font-size: 12px;
    padding: 0 0 0 8px;
    overflow: hidden;
    input{
      width: 70%!important;
    }
    .per-span{
      text-align: right;
      display: block;
      height: 30px;
      line-height: 30px!important;
      padding: 0 8px 0 0;
      margin-right: 0px;
    }
  }
  .tips-content{
    line-height: 1.8;
  }
  .font-gray{
    color: #999999!important;
  }
  .panel-box{
    h2{
      &:before{
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 5px;
        height: 15px;
        background: #f8c400;
        margin: 3px 10px 0 6px;
      }
    }
  }
  .setting input {
    width: 100%;
  }
  .setting textarea {
    width: 100%;
    height: 100px;
  }
  .div-input {
    border-bottom: #e5e5e5 1px solid;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 20px;
  }
  .div-input:last-child {
    border-bottom: 0;
  }
</style>
